/* eslint-disable @next/next/no-async-client-component */
'use client';
import { Button } from 'antd';
import styled from 'styled-components';

import style from '../page.module.scss';

import useUserStore from '@/store/user';

export default function Home() {
  const { userInfo, token, updateUserInfo, updateAge, updateToken } = useUserStore();
  return (
    <>
      <span className={style.title}>111</span>
      <span style={{ color: style.primaryColor }}>222</span>
      <Li>1</Li>
      <div>
        <div>
          姓名：{userInfo.name} 年龄：{userInfo.age}
        </div>
        <div>token：{token}</div>
        <Button type="primary" onClick={() => updateUserInfo({ name: 'lisi', age: 24 })}>
          更新用户
        </Button>
        <Button type="primary" onClick={() => updateAge(userInfo.age + 1)}>
          更新年龄
        </Button>
        <Button type="primary" onClick={() => updateToken('23652')}>
          更新token
        </Button>
      </div>
    </>
  );
}

const Li = styled.p`
  color: red;
`;
